<template>
  <view class="wrapper">
    <view class="header-bg">
      <view class="header">
        <image src="@/static/image/default-avatar.png" class="avatar"></image>
        <view class="user-info">
          <view class="nick-name">{{ friendsInfo.username }}</view>
          <view class="user-id">账号：{{friendsInfo.prettyNumber}}</view>
        </view>
      </view>
    </view>
    <view class="leaving-message" v-if="friendsInfo.friendStatus == 0">
      <view class="text-left">添加留言</view>
      <view class="text-right">{{ friendsInfo.content }}</view>
    </view>
    <!-- 未添加 -->
    <u-button
      color="#FF5551"
      class="btn"
      text="添加到通讯录"
      @click="show = true"
      v-if="!friendsInfo.friendStatus"
    ></u-button>
    <!-- 申请添加好友弹窗 -->
    <u-popup
      :show="show"
      mode="center"
      :round="15"
      overlayOpacity="0.3"
      :closeable="true"
      @close="close"
    >
      <view class="apply-pop">
        <view class="pop-title">申请添加朋友</view>
        <u--textarea
          v-model="leavingMessage"
          placeholder="填写添加留言"
          :autoHeight="false"
          class="textarea"
        ></u--textarea>
        <u-button
          color="#FF5551"
          class="pop-btn"
          text="发送好友申请"
          @click="handleAddFriends('INSERT')"
        ></u-button>
      </view>
    </u-popup>
    <u-button
      color="#FF5551"
      class="btn"
      text="通过好友申请"
      @click="handleAddFriends('APPROVAL')"
      v-if="friendsInfo.friendStatus == 0"
    ></u-button>
    <!-- 已添加 -->
    <u-button
      color="#FF5551"
      class="btn"
      text="发送消息"
      @click="show = true"
      icon="chat"
      iconColor="#FFFFFF"
      v-if="friendsInfo.friendStatus == 1"
    ></u-button>
  </view>
</template>

<script>
import { queryAddFriends, queryApplyList } from "@/services/friends";
export default {
  name: "FriendsDetail",
  data() {
    return {
      show: false,
      leavingMessage: "",
      friendsInfo: {},
    };
  },
  methods: {
    close() {
      this.show = false;
    },
    async handleAddFriends(type) {
      let data;
      if (type == "INSERT") {
        data = {
          friendUserId: this.friendsInfo._id,
          username: this.friendsInfo.username,
          type: "INSERT",
          content: this.leavingMessage,
        };
      } else if (type == "APPROVAL") {
        data = {
          friendUserId: this.friendsInfo._id,
          status: "1", // 1通过， 2拒绝
          type: "APPROVAL",
        };
      }
      const res = await queryAddFriends(data);
      console.log(res);
      if (res.code !== 200) return
      if (type == "INSERT") {
        this.show = false
      } else {
        uni.navigateTo({
          url: `/pages/chat/PersonalChat?targetId=${this.friendsInfo._id}`
        })
      }
    },
    async getApplyList(username) {
      const res = await queryApplyList({
        username: username,
      });
      if (res.code !== 200) return;
      this.friendsInfo = res.data[0];
    },
  },
  onLoad(option) {
    this.getApplyList(option.username);
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100vh;
  background: #f6f6f6;
  .header-bg {
    background: #ffe3e2;
  }
  .header {
    border-radius: 60upx 60upx 0 0;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    padding: 60upx;
    display: flex;
    .avatar {
      width: 120upx;
      height: 120upx;
      border-radius: 50%;
    }
    .user-info {
      height: 120upx;
      margin-left: 30upx;
      .nick-name {
        font-size: 36upx;
        font-weight: 500;
        color: #000000;
        line-height: 70upx;
      }
      .user-id {
        font-size: 26upx;
        font-weight: 400;
        color: #878787;
      }
    }
  }
  .leaving-message {
    margin-top: 2upx;
    box-sizing: border-box;
    padding: 36upx 50upx;
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    .text-left {
      font-size: 30upx;
      font-weight: 400;
      color: #000000;
    }
    .text-right {
      font-size: 30upx;
      font-weight: 400;
      color: #878787;
    }
  }
  .btn {
    margin-top: 70upx;
    width: 600upx;
    height: 90upx;
    background: #ff5551;
    border-radius: 45upx;
    font-size: 30upx;
    font-weight: 400;
    color: #ffffff;
    line-height: 90upx;
  }
  .apply-pop {
    width: 600upx;
    height: 570upx;
    background: #ffffff;
    border-radius: 30upx;
    box-sizing: border-box;
    padding: 60upx 60upx 50upx 60upx;
    .pop-title {
      font-size: 32upx;
      font-weight: 500;
      color: #000000;
      text-align: center;
    }
    .textarea {
      margin-top: 50upx;
      box-sizing: border-box;
      padding: 36upx;
      height: 240upx;
      background: #f1f1f1;
      border-radius: 20upx;
      font-size: 26px;
      font-weight: 400;
      color: #000000;
    }
    .pop-btn {
      margin-top: 50upx;
      width: 100%;
      height: 90upx;
      background: #ff5551;
      border-radius: 45upx;
      font-size: 30upx;
      font-weight: 400;
      color: #ffffff;
      line-height: 90upx;
    }
  }
}
</style>